<template>
  <div id="alarmInfo" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="/alarm/alarmInfo">预警记录</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch :row="2" :open="true">
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="机构">
              <Select v-model="orgIds" placeholder="请选择" clearable :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="司机">
              <DriverComplete v-model="searchForm.driverIds" :multiple="true" ref="driverSel"></DriverComplete>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="预警类型">
              <Select v-model="searchForm.earlyType" clearable multiple>
                <Option v-for="item in alarmTypeOptions" :value="item.value" :key="`alarm-type-option-${item.value}`">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="告警时间">
              <DatePicker v-model="dateRange" type="daterange" placement="bottom-end" placeholder="请选择"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
            <th>机构</th>
						<th>预警类型</th>
						<th>告警时间</th>
						<th>告警地点</th>
						<th>司机</th>
						<th>手机号</th>
						<th>操作</th>
					</thead>
					<tbody>
            <tr v-for="(v,i) in pageData.thisPageElements" :key="`AlarmInfo-list-key-${v.id}`">
              <td>{{v.orgName}}</td>
							<td>{{v.alarmTypeStr}}</td>
							<td>{{v.startTimeStr}}</td>
							<td>{{v.address}}</td>
							<td>{{v.driverName}}</td>
							<td>{{v.phone}}</td>
							<td class="operate">
								<a @click="openModal(v)">查看</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="7">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <MapModalAlarm :value="mapData" :show="modal" @close="closeModal"></MapModalAlarm>

  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import {download}  					 from '@/util/request'

  export default {
    components:{
    },
    data(){
      return {
        alarmTypeOptions: [
          {value: '1',label: '急加速'},
          {value: '2',label: '急减速'},
          {value: '3',label: '左转弯'},
          {value: '4',label: '右转弯'},
          {value: '5',label: '超速'},
          {value: '6',label: '疲劳驾驶'}
        ],

        orgIds:[],
        dateRange: [],
        searchForm:{
          driverIds:[],
          earlyType:[],
          sTime:'',
          eTime:''
        },
        // 提交时使用
        submitForm:{},

        current:1,
        modal:false,

        mapData:{}
      };
    },
    watch: {
      dateRange([sTime,eTime]) {
        this.searchForm.sTime = sTime ? moment(sTime).format('YYYY-MM-DD') : '';
        this.searchForm.eTime = eTime ? moment(eTime).format('YYYY-MM-DD') : '';
      }
    },
    computed:{
      ...mapState('alarm/alarmList',['isLoading','pageData'])
    },
    methods:{
      moment,
      ...mapActions('alarm/alarmList',['reload']),
      search(){
        let [sTime,eTime] = [...this.dateRange];
        this.submitForm = {...this.searchForm};
        this.submitForm.sTime = sTime ? moment(sTime).format('YYYY-MM-DD') : '';
        this.submitForm.eTime = eTime ? moment(eTime).format('YYYY-MM-DD') : '';
        this.submitForm.orgIds = this.orgIds.join(',');
        this.submitForm.driverIds = this.searchForm.driverIds.join(',');
        this.loadPage(1);
			},
      loadPage(n){
				this.current = n;
				this.reload({
					pageNum:this.current,
					...this.submitForm
				});
			},
      exportData(){
        download('/early/warn/export',this.submitForm);
      },
      openModal(v){
        this.mapData = {
          point:[v.lng,v.lat],
          map:{
            '告警类型':v.alarmTypeStr,
            '司机'  :v.driverName?v.driverName:'--',
            '手机号':v.phone,
            '告警时间':v.startTimeStr,
            '告警地点':v.address
          }
        };
        this.modal = true;
      },
      closeModal(){
        this.modal = false;
      },
    },
    mounted(){
      let query = this.$route.query;
      if (query.orgIds) {
        this.orgIds = query.orgIds.split(',');
      }
      if (query.driverId){
        this.$refs.driverSel.setOptions({value:query.driverId,label:query.driverName});
        this.searchForm.driverIds = [query.driverId];
      }
      if (query.sTime && query.eTime) {
        this.dateRange = [query.sTime,query.eTime];
      }
      this.search();
    }
  }
</script>
